<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<route lang="json">{
    "style": {
        "navigationBarTitleText": "Progress"
    }
}</route>

<template>
    <eui-page>
        <eui-page-content>
            <e-base-card>
                <view style="margin-top: 20px;">
                    <h2>显示百分百 进度条渐变</h2>
                    <eui-progress title="显示百分比" :total="500" :value="250" barHeight="20px" :percentum="true"
                        precision="0"
                        contentColor="linear-gradient(to right, rgba(2, 183, 230, 1) , rgba(2, 183, 230, 0.50))"></eui-progress>
                </view>
            </e-base-card>
            <view style="margin-top: 50px;">
                <h2>显示数值 进度条渐变</h2>
                <eui-progress title="动画" :total="365" :value="260" valueTitle="260天" barHeight="20px" :animation="true"
                    contentColor="linear-gradient(to right, rgba(2, 183, 230, 1) , rgba(2, 183, 230, 0.50))"></eui-progress>
            </view>
            <view style="margin-top: 50px;">
                <h2>显示数值 进度条纯色</h2>
                <eui-progress title="纯色" :total="365" :value="260" valueTitle="260天" barHeight="20px" :animation="true"
                    contentColor="rgb(255,148,0)"></eui-progress>
            </view>

            <view style="margin-top: 50px;">
                <h2>进度条圆角 文字显示在外面</h2>
                <eui-progress title="主标题" :total="365" :value="260" barHeight="10px" barRadius="10px" textOut=true
                    :animation="true" contentColor="rgb(255,148,0)"></eui-progress>
            </view>

            <view style="margin-top: 50px;">
                <h2>主标题居左</h2>
                <eui-progress title="主标题" titleAlign="left" :total="365" :value="260" barHeight="8px" barRadius="10px"
                    textOut=true :animation="true" contentColor="rgb(255,148,0)"></eui-progress>
            </view>

            <view style="margin-top: 50px;">
                <h2>副标题</h2>
                <eui-progress title="主标题" titleAlign="left" subTitle="副标题副标题副标题副标题" :total="365" value="260"
                    percentum=true barHeight="8px" barRadius="10px" textOut=true :animation="true"
                    contentColor="rgb(255,148,0)"></eui-progress>
            </view>
        </eui-page-content>
    </eui-page>

</template>

<style lang="scss">
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #dfdede;
}
</style>
